<template>
  <Modal v-model="modalVisible" footer-hide fullscreen title="自助通证销毁系统">
    <Row>
      <Col offset="2" span="12">
        <Steps :current="stepCurrent" direction="vertical" :status="actionStatus">
          <Step :content="information1" icon="ios-person" title="通证检测"></Step>
          <Step :content="information2" icon="ios-person" title="信息输入"></Step>
          <Step :content="information3" icon="ios-camera" title="通证操作"></Step>
        </Steps>
      </Col>
      <Col span="8">
        <h1 style="text-align: center">当前正在进行第 {{ stepCurrent + 1 }} 步</h1>
        <div v-if="stepCurrent===0">
          <el-form  class="demo-ruleForm" label-width="150px">
            <el-form-item style="justify-content: center">
              <Button type="primary" :loading="tokenPreviewingStatus" icon="ios-power"  @click="toTokenPreviewing">
                <span v-if="!tokenPreviewingStatus">点击进行通证检测!</span>
                <span v-else>Waiting...</span>
              </Button>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="stepCurrent===1">
          <el-form ref="numberValidateForm" :model="burnForm" class="demo-ruleForm" label-width="100px">
            <el-form-item
                label="可销毁通证量"
                prop="amount"
            >
              <span>{{burnForm.amount}}</span>
            </el-form-item>
            <el-form-item
                label="销毁比例"
                prop="burnRatio"
            >
              <Slider v-model="burnForm.burnRatio"  :marks="marks" :tip-format="format" show-tip="always" input-size="small" show-input></Slider>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="stepCurrent = 2">下一步</el-button>
            </el-form-item>
          </el-form>
        </div>
        <Card v-if="stepCurrent===2" style="width:320px;height: 320px;margin-left: 70px">
          <div style="text-align:center">
            <Spin v-if="!tokenApproveSuccess" fix>
              <Icon class="demo-spin-icon-load" size=18 type="ios-loading"></Icon>
              <div>处理中</div>
            </Spin>
            <Spin v-if="tokenApproveSuccess" fix>
              <Icon size=18 type="ios-checkmark-circle-outline"></Icon>
              <div>处理成功</div>
            </Spin>
          </div>
        </Card>
      </Col>
    </Row>
  </Modal>
</template>

<script>
import {Message} from "element-ui";

export default {
  name: "BurnToken",
  data() {
    return {
      modalVisible: false,
      tokenPreviewingStatus:false,
      stepCurrent: 0,
      actionStatus:'wait',
      information1: 'Waiting...',
      information2: 'Waiting...',
      information3: 'Waiting...',
      tokenApproveSuccess: false,
      burnForm: {
        amount: 200000000,
        burnRatio: 0
      },
      marks: {
        0: {
          style: {
            color: '#131813'
          },
          label: this.$createElement('strong', '0')
        },
        30: {
          style: {
            color: '#131813'
          },
          label: this.$createElement('strong', '30%')
        },
        60: {
          style: {
            color: '#131813'
          },
          label: this.$createElement('strong', '60%')
        },
        100: {
          style: {
            color: '#131813'
          },
          label: this.$createElement('strong', '100%')
        }
      }
    }
  },
  watch: {
    "stepCurrent": function (val) {
      if (val === 2) {
        this.information2 = "设置销毁通证比例成功"
        setTimeout(() => {
          this.tokenBurn(Math.floor(this.burnForm.burnRatio/100*this.burnForm.amount))
        }, 2000)
      }
    }
  },
  computed: {},
  mounted() {
  },
  methods: {
    format (val) {
      return '≈ '+Math.floor(val/100*this.burnForm.amount)+'通证';
    },
    toTokenPreviewing(){
      this.tokenPreviewingStatus = true
      this.LeagueJS.tokenPreviewing(status => {
        if (status === false) {
          this.information1 = "您暂无通证，无法执行销毁通证"
          this.actionStatus = 'error'
        } else {
          this.LeagueJS.getTotalResidualBurnByMSG(info=>{
            this.burnForm.amount=info
          })
          this.information1 = "您已有通证，即将执行销毁通证"
          this.stepCurrent = 1
        }
      })
    },
    tokenBurn(value) {
      console.log("销毁量",value)
      this.LeagueJS.tokenBurning(value, status => {
        if (status === true) {
          this.information2 = "通证操作成功"
          this.tokenApproveSuccess = true
          Message.success("处理成功，3秒后自动返回")
          setTimeout(() => {
            this.$emit("CloseModal", false)
          }, 3000)
        } else {
          this.information2 = "通证操作失败"
          this.actionStatus = 'error'
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}

@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
